<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <el-form inline>
      <el-form-item>
        <el-input v-model.trim="queryForm.username"
                  placeholder="用户名"
                  size="small"
                  style="width: 240px"
                  @keyup.enter="getList"></el-input>
        <el-input v-model.trim="queryForm.mobile"
                  placeholder="手机号"
                  size="small"
                  style="width: 240px; margin-left:30px"
                  @keyup.enter="getList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   size="small"
                   @click="getList">搜索</el-button>
        <el-button type="primary"
                   size="small"
                   @click="handleAdd">增加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <el-table v-loading="loading"
              :data="dataList"
              element-loading-text="Loading">
      <el-table-column align="center"
                       label="头像">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px"
                    :src="scope.row.avatarUrl"
                    :preview-src-list="[scope.row.avatarUrl]">
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="用户名"
        prop="username"
      ></el-table-column> -->
      <el-table-column align="center"
                       label="用户名"
                       prop="username"></el-table-column>
      <el-table-column align="center"
                       label="姓名"
                       prop="name"></el-table-column>
      <el-table-column align="center"
                       label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.gender == 0 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="手机号"
                       prop="mobile"></el-table-column>
      <el-table-column align="center"
                       label="余额"
                       prop="money"></el-table-column>
      <el-table-column align="center"
                       label="是否为员工">
        <template slot-scope="scope">
          <span>{{ scope.row.employee ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.adminManger && userinfo.adminManger">
            <el-link type="primary"
                     @click="hanleEditPWD(scope.row)">修改密码</el-link>
            <el-link style="margin-left: 10px"
                     type="primary"
                     @click="hanleDelete(scope.row)">删除账号</el-link>
          </div>
          <div v-if="scope.row.employee">
            <el-link type="primary"
                     @click="hanleEditPWD(scope.row)">修改密码</el-link>
            <el-link style="margin-left: 10px"
                     type="primary"
                     @click="hanleDelete(scope.row)">删除账号</el-link>
          </div>
          <el-link v-if="!scope.row.adminManger && !scope.row.employee && userinfo.adminManger"
                   type="primary"
                   @click="hanleEdit(scope.row,true)">充值</el-link>
          <el-link v-if="!scope.row.adminManger && !scope.row.employee"
                   style="margin-left:10px;"
                   type="primary"
                   @click="hanleEdit(scope.row,false)">消费</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :limit.sync="queryForm.pageSize"
                :page.sync="queryForm.currPage"
                :total="total"
                @pagination="getList" />

    <el-dialog title="充值"
               :visible.sync="dialogVisible1"
               :close-on-click-modal="false"
               width="30%">
      <el-form ref="form"
               :model="form"
               :rules="addRules"
               label-width="100px">
        <el-form-item prop="addMoney"
                      label="充值金额">
          <el-input v-model.number="form.addMoney"
                    placeholder="请输入充值金额"></el-input>
        </el-form-item>
        <el-form-item prop="giftMoney"
                      label="赠送金额">
          <el-input v-model.number="form.giftMoney"
                    placeholder="请输入赠送金额"></el-input>
        </el-form-item>
        <el-form-item prop="remake"
                      label="充值金额">
          <el-input v-model="form.remake"
                    placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmit(true)">确 定 </el-button>
      </span>
    </el-dialog>

    <el-dialog title="消费"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               width="30%">
      <el-form ref="form"
               :model="form"
               :rules="reduceRules"
               label-width="100px">
        <el-form-item prop="reduceMoney"
                      label="消费金额">
          <el-input v-model.number="form.reduceMoney"
                    placeholder="请输入消费金额"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmit(false)">确 定 </el-button>
      </span>
    </el-dialog>
    <el-dialog title="增加用户"
               :visible.sync="addVisible"
               width="30%">
      <el-form ref="userform"
               :model="userform"
               :rules="userRules"
               label-width="50px">
        <el-form-item prop="name"
                      label="姓名">
          <el-input v-model.number="userform.name"
                    placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="username"
                      label="账号">
          <el-input v-model.number="userform.username"
                    placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password"
                      label="密码">
          <el-input v-model.number="userform.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="employee"
                      label="员工">
          <el-switch v-model="userform.employee"
                     active-text="是"
                     inactive-text="否"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onAddSubmit">确 定 </el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改密码"
               :visible.sync="updatePWDVisible"
               width="30%">
      <el-input v-model="password"
                placeholder="请输入密码"></el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="updatePWDVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onPWDSubmit">确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  addMoney,
  reduceMoney,
  addUser,
  setPassword,
  delUserApi,
  getCurrentUserApi,
} from "@/api/user";
import pagination from "@/components/Pagination/index";
// import { reduce } from 'mock/user';
export default {
  components: {
    pagination,
  },
  data () {
    return {
      queryForm: {
        currPage: 1,
        pageSize: 10,
        username: "",
      },
      dataList: null,
      loading: false,
      total: 0,
      dialogVisible: false,
      dialogVisible1: false,
      addVisible: false,
      updatePWDVisible: false,
      form: {},
      userform: {
        employee: true,
      },
      addRules: {
        addMoney: [{ required: true, message: "请输入充值金额", trigger: "blur" }],
      },
      redusceRules: {
        reduceMoney: [{ required: true, message: "请输入消费金额", trigger: "blur" }],
      },
      userRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      password: "",
      nowUserId: "",
      userinfo: {},
    };
  },
  created () {
    this.getList();
    this.getCurrentUser();
  },
  methods: {
    getList () {
      getUserList(this.queryForm)
        .then((res) => {
          console.log("获取成功", res);
          const { total, records } = res.data;
          this.dataList = records;
          this.total = total;
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    },
    getCurrentUser () {
      getCurrentUserApi().then((res) => {
        this.userinfo = res.data;
      });
    },
    hanleEdit (row, status) {
      this.form = { ...row };
      if (status) {
        this.dialogVisible1 = true;
      } else {
        this.dialogVisible = true;
      }
    },
    hanleEditPWD (row) {
      this.nowUserId = row.id;
      this.password = row.password;
      this.updatePWDVisible = true;
    },
    hanleDelete (row) {
      this.nowUserId = row.id;
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delUserApi(this.nowUserId).then((res) => {
          this.$message.success("删除成功");
          this.getList();
        });
      });
    },
    onSubmit (status) {
      if (status) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const sendData = {
              id: this.form.id,
              addMoney: this.form.addMoney,
              giftMoney: this.form.giftMoney,
              remake: this.form.remake,
            };
            addMoney(sendData)
              .then((res) => {
                this.$message.success("修改成功");
                this.getList();
                this.dialogVisible1 = false;
              })
              .catch((err) => {
                console.log("修改失败", err);
              });
            this.$refs.form.resetFields();
          }
        });
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const sendData = {
              id: this.form.id,
              reduceMoney: this.form.reduceMoney,
            };
            reduceMoney(sendData)
              .then((res) => {
                this.$message.success("修改成功");
                this.getList();
                this.dialogVisible = false;
              })
              .catch((err) => {
                console.log("修改失败", err);
              });
            this.$refs.form.resetFields();
          }
        });
      }
    },
    onCancel () {
      this.$message({
        message: "cancel!",
        type: "warning",
      });
    },
    handleAdd () {
      this.addVisible = true;
    },
    onAddSubmit () {
      this.$refs.userform.validate((valid) => {
        if (valid) {
          this.userform.employee = this.userform.employee ? 1 : 0;
          addUser(this.userform).then((res) => {
            this.$message.success("新增成功");
            this.getList();
            this.addVisible = false;
            this.$refs.userform.resetFields();
          });
        }
      });
    },
    onPWDSubmit () {
      if (!this.password) return this.$message.warning("请输入密码");
      setPassword(this.nowUserId, this.password).then((res) => {
        this.$message.success("修改成功");
        this.password = "";
        this.updatePWDVisible = false;
        this.getList();
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
